import { init, classModule, propsModule, styleModule, eventListenersModule, h } from 'snabbdom'

// 创建patch函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule])

// key是最小量更新的唯一标识,diff算法会根据key来进行比较
const vnode1 = h('ul', {}, [
  h('li', { key: 'A' }, 'A'),
  h('li', { key: 'B' }, 'B'),
  h('li', { key: 'C' }, 'C'),
  h('li', { key: 'D' }, 'D')
])
// 得到盒子和按钮
const container = document.getElementById('container')
const btn = document.getElementById('btn')

patch(container, vnode1)

const vnode2 = h('ul', {}, [
  h('li', { key: 'A' }, 'A'),
  h('li', { key: 'B' }, 'B'),
  h('li', { key: 'C' }, 'C'),
  h('li', { key: 'D' }, 'D'),
  h('li', { key: 'E' }, 'E')
])
// 点击按钮时,将vnode1变成VNode
btn.onclick = function () {
  patch(vnode1, vnode2)
}
